<section class="modal fade bookmark-modal modal--fix" tabindex="-1" role="dialog" aria-labelledby="bookmarkModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <button class="btn btn-primary-outline btn-sm add-account"><i class="fa fa-plus-circle"></i> GitHub</button>
        <button class="btn btn-primary-outline btn-sm add-group"><i class="fa fa-plus-circle"></i> Group</button>
        <div class="btn-group btn-group-sm" role="group">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary-outline dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-tags"></i> Tags
            </button>
            <div class="dropdown-menu dropdown-menu-right tag-menu">
              <div class="dropdown-item">
                All Tags
              </div>
              <div role="separator" class="dropdown-divider"></div>
            </div>
          </div>
        </div>
        <button class="btn btn-primary-outline btn-sm sync"><i class="fa fa-cloud"></i> Sync</button>
      </div>
      <div class="modal-body">
        <header class="hd empty">
          <div class="loading">
            <div class="logo"><img class="spinner" src="resources/images/codelf_logo.png"></div>
          </div>
          <div class="empty">
            <div class="top">
              <i class="bookmark-logo fa fa-bookmark fa-5x"></i>
              <h5>Add GitHub users to organize the stars and repositories</h5>
            </div>
            <div class="input-group form">
              <input type="text" class="form-control" placeholder="username">
              <span class="input-group-btn">
                <button class="btn btn-secondary submit" type="button">Add</button>
              </span>
            </div>
            <div class="tip text-muted">*e.g. https://github.com/<span class="text-danger">username</span></div>
          </div>
        </header>
        <section class="bd" role="tablist">
          <script type="text/html" data-template="repoGroup">
            <article class="card repo-group-item" data-id="{id}">
              <header class="card-header hd" role="tab" id="repo_group_hd_{id}">
                <a href="#repo_group_list_{id}" data-toggle="collapse" data-parent=".bd" aria-expanded="false" aria-controls="repo_group_list_{id}">{name}</a>
                &nbsp;<span class="label label-info label-pill count">{itemCount}</span>
                <div class="pull-xs-right ctrl">
                  <div class="btn-group btn-group-sm" role="group">
                    <div class="btn-group" role="group">
                      <div class="menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="repo_group_menu_{id}"><i class="fa fa-cog"></i></div>
                      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="repo_group_menu_{id}">
                        <div class="dropdown-item edit" data-id="{id}" data-name="{name}"><i class="fa fa-pencil-square-o"></i></div>
                        <div class="dropdown-item del" data-id="{id}"><i class="fa fa-trash-o"></i></div>
                      </div>
                    </div>
                  </div>
                </div>
                <form class="form-inline pull-xs-right search">
                  <div class="form-group">
                    <div class="input-group input-group-sm">
                      <input type="text" class="form-control" placeholder="search...">
                      <div class="input-group-addon submit"><i class="fa fa-search"></i></div>
                    </div>
                  </div>
                </form>
              </header>
              <section class="card-block repo-list collapse" id="repo_group_list_{id}" role="tabpanel" aria-labelledby="repo_group_hd_{id}">
                {items}
              </section>
            </article>
          </script>
          <script type="text/html" data-template="groupItem">
            <div class="dropdown-item add-repo" data-id="{id}">
              <span class="label label-default label-pill"><i class="fa fa-check"></i></span> {name}
            </div>
          </script>
          <script type="text/html" data-template="tagItem">
            <div class="dropdown-item add-repo" data-id="{id}">
              <span class="label label-pill" style="background:{color};"><i class="fa fa-check"></i></span> {name}
            </div>
          </script>
          <script type="text/html" data-template="tagDot">
            <span style="color: {color}"><i class="fa fa-circle"></i></span>
          </script>
          <script type="text/html" data-template="repoItem">
            <article class="card repo-item" data-id="{id}" data-repoid="{originRepoId}" data-name="{_full_name}" data-repolang="{language}" data-repostar="{stargazers_count}" data-repostar="{stargazers_count}" title="{language}">
              <div class="card-block">
                <header class="repo-item__hd"><h6><span class="label label-default label-pill">{language}</span><span class="label label-default label-pill">{stargazers_count}</span><a href="{html_url}" target="_blank">{full_name}</a></h6></header>
                <section class="repo-item__bd fix-break-word">{description}</section>
              </div>
              <div class="card-footer">
                <div class="btn-group btn-group-sm group-menu" role="group">
                  <div class="btn-group" role="group">
                    <a class="dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="javascript:void(0);">
                      Add to group
                    </a>
                    <div class="dropdown-menu">
                      {groupItems}
                      <div role="separator" class="dropdown-divider"></div>
                      <div class="dropdown-item text-primary add-group">
                        <i class="fa fa-plus-circle"></i> Add new group
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btn-group btn-group-sm tag-menu" role="group">
                  <div class="btn-group" role="group">
                    <a class="dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="javascript:void(0);">
                      Add to tag
                    </a>
                    <div class="dropdown-menu">
                      {tagItems}
                    </div>
                  </div>
                </div>
                <div class="btn-group btn-group-sm tag-dots fade" role="group"></div>
              </div>
            </article>
          </script>
        </section>
      </div>
    </div>
  </div>
</section>
<section class="modal fade bookmark-user-modal" tabindex="-1" role="dialog" aria-labelledby="bookmarkAccountModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h6 class="modal-title">Add GitHub User</h6>
      </div>
      <div class="modal-body">
        <div class="text-muted">*e.g. https://github.com/<span class="text-danger">username</span></div>
        <div class="input-group form">
          <input type="text" class="form-control" placeholder="username">
          <span class="input-group-btn">
            <button class="btn btn-secondary submit" type="button" data-dismiss="modal">Add</button>
          </span>
        </div>
        <section class="list-group user-list">
          <script type="text/html">
          <article class="list-group-item user-item" data-id="{id}">
            <a href="https://github.com/{name}" target="_blank">@{name}</a>
            <div class="btn-group btn-group-sm pull-xs-right ctrl">
              <button class="btn btn-secondary btn-sm sync" data-name="{name}" data-dismiss="modal"><i class="fa fa-refresh"></i> Sync</button>
              <button class="btn btn-secondary btn-sm del" data-id="{id}"><i class="fa fa-trash-o"></i></button>
            </div>
          </article>
          </script>
        </section>
      </div>
    </div>
  </div>
</section>
<section class="modal fade bookmark-group-modal" tabindex="-1" role="dialog" aria-labelledby="bookmarkGroupModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h6 class="modal-title">Edit group</h6>
      </div>
      <div class="modal-body">
          <input type="text" class="form-control group-name" placeholder="New group name">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary submit-group" type="button" data-dismiss="modal">Done</button>
      </div>
    </div>
  </div>
</section>
<section class="modal fade bookmark-sync-modal" tabindex="-1" role="dialog" aria-labelledby="bookmarkSyncModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h6 class="modal-title">Sync</h6>
      </div>
      <div class="modal-body">
        <div class="text-muted">Download/upload groups and tags with a sync id</div>
        <input type="text" class="form-control sync-id" placeholder="Sync id">
        <div class="text-danger sync-note">First, click "Upload" to backup and get a sync id</div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary download" type="button" data-dismiss="modal"><i class="fa fa-cloud-download"></i> Download</button>
        <button class="btn btn-secondary upload" type="button" data-dismiss="modal"><i class="fa fa-cloud-upload"></i> Upload</button>
      </div>
    </div>
  </div>
</section>
